<!--
    Copyright 2006 Google Inc.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-->
<!doctype html><html><head>
    <title>ExplorerCanvas Example 1</title>
    <style>
        body {
            background-color:black;
            margin:50px;
            text-align:center;
        }

        canvas {
            border:1px solid #444;
        }
    </style>
  <script src="../uuCanvas.js"></script>
<script>
var canvas, ctx;
var particles = [];


// calc fps
var begin = +new Date;
var fpscount = 0;
// use ctx.lock()
var uselock = 1;
var stress = 20;
var restart = 0;
//var TTL = 10;


function Particle() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;

    this.xvel = Math.random() * 5 - 2.5;
    this.yvel = Math.random() * 5 - 2.5;
}

Particle.prototype.update = function() {
    this.x += this.xvel;
    this.y += this.yvel;

    this.yvel += 0.1;

    if (this.x > canvas.width || this.x < 0) {
        this.xvel = -this.xvel;
    }

    if (this.y > canvas.height || this.y < 0) {
        this.yvel = -this.yvel;
    }
}

function loop() {
    if (uselock) {
        ctx.lock(1);
    } else {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    for(var i = 0; i < stress; i++) {
        particles[i].update();

        ctx.beginPath();
        ctx.moveTo(particles[i].x, particles[i].y);
        ctx.lineTo(particles[i].x - particles[i].xvel,
                             particles[i].y - particles[i].yvel);
        ctx.stroke();
        ctx.closePath();
    }

    if (uselock) {
        ctx.unlock();
    }

    if (restart) {
        stress = restart;
        restart = 0;
        begin = +new Date; // reset
        fpscount = 0; // reset

        particles = [];
        for(var i = 0; i < stress; i++) {
            particles[i] = new Particle();
        }
        setTimeout(loop, 0);
    } else {
//        if (TTL > 0)
        setTimeout(loop, 0);

//        --TTL;
    }

    // fps
    if ((++fpscount & 0x3f) === 0x3f) {
        var fps = fpscount / (((+new Date) - begin))
        window.status = "fps = " + ((fps * 1000) | 0) + (uselock ? " boost" : " off");
    }
}

function xcanvas() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    ctx.xFlyweight = 1;

    document.title = "Backend: " + (ctx.xBackend || "Canvas");

    for(var i = 0; i < stress; i++) {
        particles[i] = new Particle();
    }

    ctx.lineWidth = 2;
    ctx.strokeStyle = "white";
    loop();
}

function boost() {
    begin = +new Date; // reset
    fpscount = 0; // reset
    uselock = !uselock; // toggle
}

function switchStress() {
    switch (stress) {
    case  20: restart = 100; break;
    case 100: restart = 300; break;
    case 300: restart =  20;
    }
}

function switchBackend() {
    var n = window.name || "";

    if (!n) {
        window.name = "flash";
    } else {
        switch (n) {
        case "sl":      window.name = "flash"; break;
        case "flash":   window.name = "vml"; break;
        case "vml":     window.name = "sl"; break;
        }
    }
    location.reload(false);
}
function xboot(uu) {
    uu.id("canvas").className = window.name || "sl";
}

</script>
</head>
  <body>
    <input type="button" value="boost/off" onclick="boost()" />
    <input type="button" value="Silverlight/Flash/VML" onclick="switchBackend()" />
    <input type="button" value="particles 20/100/300" onclick="switchStress()" />
    <br />
    <canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>
